<template>
  <div class="talentlist">
    <h3>达人歌单</h3>
    <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content">
        <li v-for="item in talentListData" :key="item.dissid">
          <div class="cover">
            <img :src="item.imgurl" alt="" />
            <!-- <span>{{ (item.listen_num/10000).toFixed(1) }}万</span> -->
            <span>{{ (item.listennum / 10000) | numFilter(1) }} 万 </span>
          </div>
          <span>{{ item.ctime }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import BScroll from "better-scroll";

export default {
  data() {
    return {
      talentListData: [],
    };
  },
  mounted() {
    this.gettalentlist();
  },
  methods: {
    gettalentlist() {
      axios
        .get("/api/songlist/list")
        .then((res) => {
          console.log(res.data.data.list); //默认的是接口的数据
          this.talentListData = res.data.data.list;
          this.betterScrollHorizontal(this.talentListData.length, 130);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    betterScrollHorizontal(num, itemWidth) {
      let width = num * itemWidth;
      this.$refs.content.style.width = width + "px";
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
          click: true,
          startX: 0,
          scrollX: true, //横向流动：横向为true
          scrollY: false, //纵向流动：纵向为true
        });
      });
    },
  },
  filters: {
    //过滤数据
    numFilter(value, num) {
      //value为原数据
      return parseFloat(value).toFixed(num); //过滤为num位的小数
    },
  },
};
</script>

<style scoped>
/*父容器必须要设置横向的宽度，并且要设置子容器（内容容器）的超出部分隐藏*/
.talentlist {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 12%;
}
.talentlist > h3 {
  text-align: left;
}
.wrapper {
  overflow: hidden;
  width: 100%;
}
ul.content > li {
  vertical-align: top; /* 水平方向对齐 */
  display: inline-block; /**设置为行内元素 */
  width: 130px; /**宽度需要 */
}
ul.content > li img {
  width: 90%;
  border-radius: 10px;
}
.cover {
  position: relative; /**相对定位 */
}
.cover > span {
  background-color: rgba(219, 216, 216, 0.459);
  position: absolute; /**绝对定位 */
  right: 10px; /** 距右边距 */
  bottom: 5px; /** 距底边距 */
  /* left: 0; 距左边距 */
  /* top: 0; 距顶边距 */
  border-radius: 10px;
  width: 70px;
  font-size: 10px;
}
ul.content > li > span {
  width: 90%;
  display: inline-block;
  font-size: 10px;
}
</style>

//相对定位(position: relative;) 与 绝对定位(position: absolute;) 是同时出现的,相对定位 在 绝对定位 的上一级出现
//  created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
//  mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
